<template>
  <el-tabs
    v-model="activeTab"
    class="index-tabs"
    tab-position="left"
    :style="{
      height: '100%',
    }"
    @tab-change="tabChange"
  >
    <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name">
      <template #label>
        <div class="custom-tabs-label">
          <i :class="['sdlive', item.icon]"></i>
          <span class="title">{{ item.title }}</span>
        </div>
      </template>
      <div class="search-header">
        <el-input
          style="width: 300px; margin-right: 10px"
          v-model="searchContext"
          clearable
          :placeholder="
            item.video_type === 'live'
              ? '请输入直播号或直播标题'
              : '请输入点播标题'
          "
          @clear="searchList"
        ></el-input>
        <el-button type="primary" plain :icon="Search" @click="searchList">搜索</el-button>
        <el-button
          v-if="activeTab === 'live_my'"
          class="search-head-btn"
          type="primary"
          :icon="CirclePlus"
          @click="toAddLive"
        >
          新建直播
        </el-button>
      </div>
      <VideoListPc
        ref="videoListRef"
        :name="item.name"
        :is-live="item.video_type === 'live'"
        :search-context="searchContext"
      ></VideoListPc>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, nextTick, onActivated, defineExpose } from 'vue'
import { useRouter } from 'vue-router'

import { CirclePlus, Search } from '@element-plus/icons-vue'
import VideoListPc from './index-list-pc.vue'

const props = defineProps({
  tabList: {
    type: Array,
    default: () => []
  },
  isLive: {
    type: Boolean,
    default: true
  }
})

const $router = useRouter()

const activeTab = ref(props.tabList[0].name)
const searchContext = ref('')

const videoListRef = ref(null)

const toAddLive = () => {
  $router.push({
    path: '/add'
  })
}

const tabChange = (name) => {
  searchContext.value = ''
  refGetData()
}

const refGetData = async() => {
  await nextTick()
  const index = props.tabList.findIndex(item => item.name === activeTab.value)
  if (videoListRef.value && index > -1 && videoListRef.value[index]) {
    videoListRef.value[index].getData(true)
  }
}

const searchList = () => {
  refGetData()
}

defineExpose({
  refGetData
})

</script>

<style lang="less" scoped>
.search-header {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* prettier-ignore */
  border-bottom: 1PX solid #ececec;
}
</style>
